<template>
  <el-card>
    <template #header>
      <el-row align="middle" justify="start" :gutter="20">
        <el-col :span="4">
          {{ card.data.name }}
        </el-col>
        <el-col :span="6">
          <double-max-bar :key-stack="['HP']"
                          :state-group="stateGroup.HP"
                          :state-color="stateColor.HP"
          ></double-max-bar>
        </el-col>
        <el-col :span="6">
          <double-max-bar :key-stack="['MP']"
                          :state-group="stateGroup.MP"
                          :state-color="stateColor.MP"></double-max-bar>
        </el-col>
        <el-col :span="4">
          <el-button icon="document" @click="download(card.data.name,getJson())"></el-button>
        </el-col>
      </el-row>
    </template>
    <el-space v-if="!tabMode" alignment="stretch" :fill-ratio="10" fill wrap>
      <el-card style="width: 16rem" class="card-card" header="基本信息">
        <template #default>
          <default-bar name="姓名" focus-text :value-key-stack="['name']"></default-bar>
          <default-bar name="姓别" focus-text :value-key-stack="['sex']"></default-bar>
          <default-bar name="种族" focus-text :value-key-stack="['race']"></default-bar>
          <default-bar name="出身" focus-text :value-key-stack="['hometown']"></default-bar>
          <default-bar name="名誉" focus-text :value-key-stack="['fame']"></default-bar>
          <default-bar name="资金" focus-text :value-key-stack="['gold']"></default-bar>
        </template>
      </el-card>
      <el-card style="width: 16rem" class="card-card" header="属性">
        <template #default>
          <default-bar name="力量"
                       :value-key-stack="['attribute','pow']"></default-bar>
          <default-bar name="速度"
                       :value-key-stack="['attribute','spd']"></default-bar>
          <default-bar name="体质"
                       :value-key-stack="['attribute','phy']"></default-bar>
          <default-bar name="智慧"
                       :value-key-stack="['attribute','int']"></default-bar>
          <default-bar name="魅力"
                       :value-key-stack="['attribute','cha']"></default-bar>
          <default-bar name="灵魂"
                       :value-key-stack="['attribute','sol']"></default-bar>
        </template>
      </el-card>
      <el-card style="width: 16rem" class="card-card" header="额外属性">
        <template #default>
          <default-bar name="行动点" focus-text
                       :value-key-stack="['ap']"></default-bar>
          <default-bar name="护甲点" focus-text
                       :value-key-stack="['armor']"></default-bar>
          <default-bar name="抗性点" focus-text
                       :value-key-stack="['resistance']"></default-bar>
          <default-bar name="幸运点" focus-text
                       :value-key-stack="['luckPoint']"></default-bar>
          <default-bar name="容纳点" focus-text
                       :value-key-stack="['slotPoint']"></default-bar>
          <default-bar name="命运点" focus-text
                       :value-key-stack="['fatePoint']"></default-bar>
        </template>
      </el-card>
      <el-card style="width: 16rem" class="card-card" header="描述">
        <default-bar text focus-text nameless :value-key-stack="['story']"></default-bar>
        <el-scrollbar max-height="10rem">
          <default-bar :deletable="isKp" name-change-able
                       v-for="(msg,index) in card.data.otherDescribe" :value-key-stack="['otherDescribe',index,'text']"
                       :name-key-stack="['otherDescribe',index,'name']"
                       @delete="
                         this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['otherDescribe']})"></default-bar>
          <el-input clearable v-model="newDescribeName">
            <template #append>
              <el-button icon="EditPen" :disabled="!isKp" @click="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push({name:newDescribeName,text:''})
                       },
                       index:card.id,
                       keyStack:['otherDescribe']})">
              </el-button>
            </template>
          </el-input>
        </el-scrollbar>
      </el-card>
      <el-card style="width: 16rem" class="card-card" header="武器">
        <el-tabs v-model="chooseWeapon" :addable="isKp" :closable="isKp"
                 @tab-remove="(index)=>{this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['weapon']});this.chooseWeapon=index-1}"
                 @tab-add="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push(Weapon('new'))
                       },
                       index:card.id,
                       keyStack:['weapon']})">
          <el-tab-pane :name="index" v-for="(weapon,index) in card.data.weapon" :label="weapon.name">
            <default-bar name="名称" focus-text :value-key-stack="['weapon',index,'name']"
            ></default-bar>
            <default-bar name="伤害" focus-text :value-key-stack="['weapon',index,'damage']"
            ></default-bar>
            <default-bar name="DB" focus-text :value-key-stack="['weapon',index,'DB']"
            ></default-bar>
            <default-bar name="ap" focus-text :value-key-stack="['weapon',index,'ap']"
            ></default-bar>
            <default-bar name="装填ap" focus-text :value-key-stack="['weapon',index,'reload']"
            ></default-bar>
            <default-bar name="武器计数" focus-text :value-key-stack="['weapon',index,'wp']"
            ></default-bar>
            <default-bar name="判定" focus-text :value-key-stack="['weapon',index,'dependent']"
            ></default-bar>
            <default-bar name="描述" text focus-text :value-key-stack="['weapon',index,'describe']"
            ></default-bar>
          </el-tab-pane>
        </el-tabs>

      </el-card>
      <el-card style="width: 16rem" class="card-card" header="技能">
        <el-scrollbar max-height="22rem">
          <default-bar :deletable="isKp"
                       :name-change-able="isKp"
                       v-for="(s,i) in card.data.skill"
                       :value-key-stack="['skill',i,'point']"
                       :name-key-stack="['skill',i,'name']"
                       @delete="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(i,1)
                       },
                       index:card.id,
                       keyStack:['skill']})"></default-bar>

          <el-input clearable v-model="newSkillName">
            <template #append>
              <el-button icon="EditPen" :disabled="!isKp" @click="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push({name:newSkillName,point:''})
                       },
                       index:card.id,
                       keyStack:['skill']})">
              </el-button>
            </template>
          </el-input>
        </el-scrollbar>
      </el-card>
      <el-card style="width: 16rem" class="card-card" header="权能">
        <default-bar name="天分" :value-key-stack="['warPowerPoint']"></default-bar>
        <template v-for="(row , index) in card.data.warPower" @click="chooseWarPower=index">
          <el-row>
            <el-col :span="6">
              <default-bar placeholder="名称" :value-key-stack="['warPower',index,'name']"
                           nameless></default-bar>
            </el-col>
            <el-col :span="6">

              <default-bar placeholder="mp" :value-key-stack="['warPower',index,'sp']"
                           nameless></default-bar>
            </el-col>
            <el-col :span="12">

              <default-bar placeholder="ap" :value-key-stack="['warPower',index,'ap']"
                           nameless :deletable="isKp"
                           @delete="()=>{this.chooseWarPower=null;this.$store.commit('cardData',{data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['warPower']})}"></default-bar>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <default-bar placeholder="效果描述" nameless text :value-key-stack="['warPower',index,'effect']"
                           focus-text></default-bar>
            </el-col>
          </el-row>
        </template>

        <el-input clearable v-model="newWarPowerName">
          <template #append>
            <el-button icon="EditPen" :disabled="!isKp" @click="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push(WarPower(newWarPowerName))
                       },
                       index:card.id,
                       keyStack:['warPower']})">
            </el-button>
          </template>
        </el-input>

      </el-card>
      <el-card style="width: 16rem" class="card-card" header="魔法">
        <default-bar name="天分"
                     :value-key-stack="['soulMagicPoint']"></default-bar>
        <el-tabs>
          <el-tab-pane label="魂魔法">
            <default-bar focus-text name="阶级" :value-key-stack="['soulMagicLevel']"></default-bar>
            <el-tabs v-model="chooseSoulMagic" :addable="isKp" @tab-add="()=>{this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push(SoulMagic(SoulMark(),'new'))
                       },
                       index:card.id,
                       keyStack:['soulMagic']})}"
                     :closable="isKp" @tab-remove="(index)=>{this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['soulMagic']});this.chooseSoulMagic=index-1}"
            >
              <el-tab-pane :name="index" v-for="(magic,index) in card.data.soulMagic" :label="magic.name">
                <SoulMagicBar :magic-index="index" :magic="magic"></SoulMagicBar>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="元素魔法">

            <element-class-bar name="适性" :value-key-stack="['elementMagicClass']"></element-class-bar>
            <default-bar focus-text name="阶级" :value-key-stack="['elementMagicLevel']"></default-bar>
            <!--TODO 法表提示 等待法表.jpg-->
            这里缺个法表
          </el-tab-pane>

        </el-tabs>
      </el-card>
    </el-space>
    <el-tabs v-if="tabMode">
      <el-tab-pane label="基本信息"><el-card style="width: 18rem" class="card-card">
          <template #default>
            <default-bar name="姓名" focus-text :value-key-stack="['name']"></default-bar>
            <default-bar name="姓别" focus-text :value-key-stack="['sex']"></default-bar>
            <default-bar name="种族" focus-text :value-key-stack="['race']"></default-bar>
            <default-bar name="出身" focus-text :value-key-stack="['hometown']"></default-bar>
            <default-bar name="名誉" focus-text :value-key-stack="['fame']"></default-bar>
            <default-bar name="资金" focus-text :value-key-stack="['gold']"></default-bar>
          </template>
        </el-card></el-tab-pane>
      <el-tab-pane label="属性"><el-card style="width: 18rem" class="card-card" >
        <template #default>
          <default-bar name="力量"
                       :value-key-stack="['attribute','pow']"></default-bar>
          <default-bar name="速度"
                       :value-key-stack="['attribute','spd']"></default-bar>
          <default-bar name="体质"
                       :value-key-stack="['attribute','phy']"></default-bar>
          <default-bar name="智慧"
                       :value-key-stack="['attribute','int']"></default-bar>
          <default-bar name="魅力"
                       :value-key-stack="['attribute','cha']"></default-bar>
          <default-bar name="灵魂"
                       :value-key-stack="['attribute','sol']"></default-bar>
        </template>
      </el-card></el-tab-pane>
      <el-tab-pane label="额外属性"><el-card style="width: 18rem" class="card-card" >
        <template #default>
          <default-bar name="行动点" focus-text
                       :value-key-stack="['ap']"></default-bar>
          <default-bar name="护甲点" focus-text
                       :value-key-stack="['armor']"></default-bar>
          <default-bar name="抗性点" focus-text
                       :value-key-stack="['resistance']"></default-bar>
          <default-bar name="幸运点" focus-text
                       :value-key-stack="['luckPoint']"></default-bar>
          <default-bar name="容纳点" focus-text
                       :value-key-stack="['slotPoint']"></default-bar>
          <default-bar name="命运点" focus-text
                       :value-key-stack="['fatePoint']"></default-bar>
        </template>
      </el-card></el-tab-pane>
      <el-tab-pane label="描述"><el-card style="width: 18rem" class="card-card" >
        <default-bar text focus-text nameless :value-key-stack="['story']"></default-bar>
        <el-scrollbar max-height="10rem">
          <default-bar :deletable="isKp" name-change-able
                       v-for="(msg,index) in card.data.otherDescribe" :value-key-stack="['otherDescribe',index,'text']"
                       :name-key-stack="['otherDescribe',index,'name']"
                       @delete="
                         this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['otherDescribe']})"></default-bar>
          <el-input clearable v-model="newDescribeName">
            <template #append>
              <el-button icon="EditPen" :disabled="!isKp" @click="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push({name:newDescribeName,text:''})
                       },
                       index:card.id,
                       keyStack:['otherDescribe']})">
              </el-button>
            </template>
          </el-input>
        </el-scrollbar>
      </el-card></el-tab-pane>
      <el-tab-pane label="武器"><el-card style="width: 18rem" class="card-card" >
        <el-tabs v-model="chooseWeapon" :addable="isKp" :closable="isKp"
                 @tab-remove="(index)=>{this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['weapon']});this.chooseWeapon=index-1}"
                 @tab-add="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push(Weapon('new'))
                       },
                       index:card.id,
                       keyStack:['weapon']})">
          <el-tab-pane :name="index" v-for="(weapon,index) in card.data.weapon" :label="weapon.name">
            <default-bar name="名称" focus-text :value-key-stack="['weapon',index,'name']"
            ></default-bar>
            <default-bar name="伤害" focus-text :value-key-stack="['weapon',index,'damage']"
            ></default-bar>
            <default-bar name="DB" focus-text :value-key-stack="['weapon',index,'DB']"
            ></default-bar>
            <default-bar name="ap" focus-text :value-key-stack="['weapon',index,'ap']"
            ></default-bar>
            <default-bar name="装填ap" focus-text :value-key-stack="['weapon',index,'reload']"
            ></default-bar>
            <default-bar name="武器计数" focus-text :value-key-stack="['weapon',index,'wp']"
            ></default-bar>
            <default-bar name="判定" focus-text :value-key-stack="['weapon',index,'dependent']"
            ></default-bar>
            <default-bar name="描述" text focus-text :value-key-stack="['weapon',index,'describe']"
            ></default-bar>
          </el-tab-pane>
        </el-tabs>

      </el-card></el-tab-pane>
      <el-tab-pane label="技能"><el-card style="width: 18rem" class="card-card" >
        <el-scrollbar max-height="22rem">
          <default-bar :deletable="isKp"
                       :name-change-able="isKp"
                       v-for="(s,i) in card.data.skill"
                       :value-key-stack="['skill',i,'point']"
                       :name-key-stack="['skill',i,'name']"
                       @delete="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(i,1)
                       },
                       index:card.id,
                       keyStack:['skill']})"></default-bar>

          <el-input clearable v-model="newSkillName">
            <template #append>
              <el-button icon="EditPen" :disabled="!isKp" @click="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push({name:newSkillName,point:''})
                       },
                       index:card.id,
                       keyStack:['skill']})">
              </el-button>
            </template>
          </el-input>
        </el-scrollbar>
      </el-card></el-tab-pane>
      <el-tab-pane label="权能"><el-card style="width: 18rem" class="card-card" >
        <default-bar name="天分" :value-key-stack="['warPowerPoint']"></default-bar>
        <template v-for="(row , index) in card.data.warPower" @click="chooseWarPower=index">
          <el-row>
            <el-col :span="6">
              <default-bar placeholder="名称" :value-key-stack="['warPower',index,'name']"
                           nameless></default-bar>
            </el-col>
            <el-col :span="6">

              <default-bar placeholder="mp" :value-key-stack="['warPower',index,'sp']"
                           nameless></default-bar>
            </el-col>
            <el-col :span="12">

              <default-bar placeholder="ap" :value-key-stack="['warPower',index,'ap']"
                           nameless :deletable="isKp"
                           @delete="()=>{this.chooseWarPower=null;this.$store.commit('cardData',{data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['warPower']})}"></default-bar>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <default-bar placeholder="效果描述" nameless text :value-key-stack="['warPower',index,'effect']"
                           focus-text></default-bar>
            </el-col>
          </el-row>
        </template>

        <el-input clearable v-model="newWarPowerName">
          <template #append>
            <el-button icon="EditPen" :disabled="!isKp" @click="this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push(WarPower(newWarPowerName))
                       },
                       index:card.id,
                       keyStack:['warPower']})">
            </el-button>
          </template>
        </el-input>

      </el-card></el-tab-pane>
      <el-tab-pane label="魔法"><el-card style="width: 18rem" class="card-card" >
        <default-bar name="天分"
                     :value-key-stack="['soulMagicPoint']"></default-bar>
        <el-tabs>
          <el-tab-pane label="魂魔法">
            <default-bar focus-text name="阶级" :value-key-stack="['soulMagicLevel']"></default-bar>
            <el-tabs v-model="chooseSoulMagic" :addable="isKp" @tab-add="()=>{this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.push(SoulMagic(SoulMark(),'new'))
                       },
                       index:card.id,
                       keyStack:['soulMagic']})}"
                     :closable="isKp" @tab-remove="(index)=>{this.$store.commit('cardData',
                       {data:(ele)=>{
                         ele.splice(index,1)
                       },
                       index:card.id,
                       keyStack:['soulMagic']});this.chooseSoulMagic=index-1}"
            >
              <el-tab-pane :name="index" v-for="(magic,index) in card.data.soulMagic" :label="magic.name">
                <SoulMagicBar :magic-index="index" :magic="magic"></SoulMagicBar>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="元素魔法">

            <element-class-bar name="适性" :value-key-stack="['elementMagicClass']"></element-class-bar>
            <default-bar focus-text name="阶级" :value-key-stack="['elementMagicLevel']"></default-bar>
            <!--TODO 法表提示 等待法表.jpg-->
            这里缺个法表
          </el-tab-pane>

        </el-tabs>
      </el-card></el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import DefaultBar from "@/components/bar/DefaultBar";
import {Card, WarPower, Weapon} from "@/js/card";
import DoubleMaxBar from "@/components/bar/DoubleMaxBar";
import {ColdDrink, EditPen} from "@element-plus/icons-vue";
import SoulMagicMarkBar from "@/components/bar/SoulMagicMarkBar";
import {SoulMagic, SoulMark} from "@/js/soulMagic";
import SoulMagicBar from "@/components/bar/SoulMagicBar";
import Parser from "@/js/util/cardParser";
import ElementClassBar from "@/components/bar/ElementClassBar";
import {computed} from "vue";

export default {
  name: "DefaultCard",
  components: {ElementClassBar, SoulMagicBar, SoulMagicMarkBar, ColdDrink, DoubleMaxBar, DefaultBar, EditPen},
  props: {
    card: Card(),
    isKp: Boolean(),
    tabMode:Boolean
  }, data() {
    return {
      newSkillName: '',
      newDescribeName: '',
      newWarPowerName: '',
      chooseWarPower: null,
      chooseWeapon: 0,
      chooseSoulMagic: 0
    }
  },
  computed: {
    stateGroup() {
      return this.$store.state.stateGroup
    },
    stateColor() {
      return this.$store.state.stateGroupColor
    }
  },
  methods: {

    getJson() {
      return Parser.cardToJson(this.card)
    },
    download(filename, text) {
      let pom = document.createElement('a');
      pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
      pom.setAttribute('download', filename);
      pom.click();
    },
    Weapon, WarPower, SoulMark, SoulMagic
  },
  provide() {
    return {
      cardIndex: computed(() => this.card.id),
      isKp: this.isKp
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
</style>
